<style type="text/css">
    .clearfix::after{
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .header-title {
        font-size: 0.4rem;
        height: 1.085rem;
        font-family: 'Microsoft YaHei';
        font-weight: bold;
        background-color: red;
        color: white;
        letter-spacing: 0.05rem;
    }
    .mute-all {
        padding: 0rem 0.2rem;
        height: 1rem;
        background-color: white;
        margin-bottom: 0.2rem;
    }
    .mute-all div label{
        font-size: 0.4rem;
        font-weight: bold;
        line-height: 100%;
    }
    .tag {
        margin-left: 0.2rem
    }
    .mute-list, .unmute-list {
        margin-bottom: 0.2rem;
    }
    .item-img {
        margin: auto 0.3rem;
    }
    .item-img img {
        border-radius: 50%;
        width: 1.2rem;
        height: 1.2rem;
    }
    .item-name {
        font-weight: bold;
        font-size: 0.35rem;
    }
    .item-intro {
        font-size: 0.2rem;
        margin-top: 0.25rem;
    }
    
</style>


<div class="bui-page bui-box-vertical">
    <header>
       <div class="bui-bar header-title" style="background-color: red;">
        <div class="bui-bar-left">
            <a class="bui-btn" onclick="bui.back();"><i class="icon-back"></i></a>
        </div>
        <div class="bui-bar-main" style="font-size: 0.4rem;">禁言设置</div>
        <div class="bui-bar-right">
            <!-- 右边按钮 -->
        </div>
       </div>
    </header>
    <main>
        <div class="mute-all bui-box bui-box-align-middle">
            <div class="span1">
                <label>全体禁言</label>
            </div>
            <input type="checkbox" class="bui-switch danger" name="muteall" id="muteall" value="">
        </div>
        <div class="mute-list">
            <div class="tag">
                已禁言成员
            </div>
            <ul class="bui-list">
               
                <li class="bui-btn bui-box clearactive">
                    <div class="span1">
                        <div class="bui-box bui-box-align-middle">
                            <div class="item-img">
                                <img src='images/other/35.jpg'>
                            </div>
                            <div class="item-detail span1">
                                <div class="item-name">Jackson Wang</div>
                                <div class="item-intro">13570512160</div>
                            </div>
                        </div>
                    </div>
                    <input type="checkbox" class="bui-switch danger" name="bluetooth" value="" checked>
                </li>
                
            </ul>
        </div>
        <div class="unmute-list">
            <div class="tag">
                普通成员
            </div>
            <ul class="bui-list">
                <li class="bui-btn bui-box clearactive">
                    <div class="span1">
                        <div class="bui-box bui-box-align-middle">
                            <div class="item-img">
                                <img src='images/other/35.jpg'>
                            </div>
                            <div class="item-detail span1">
                                <div class="item-name">Jackson Wang</div>
                                <div class="item-intro">13570512160</div>
                            </div>
                        </div>
                    </div>
                    <input type="checkbox" class="bui-switch danger" name="bluetooth" value="">
                </li>
                
            </ul>
        </div>
    </main>
    <footer>
        <!-- 底部内容 -->
    </footer>
</div>